
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<style>
		
		.menu-button .bar:nth-of-type(1) {
			margin-top: 0px;
		}

		.menu-button .bar:nth-of-type(3) {
			margin-bottom: 0px;
		}

		.bar {
			position: relative;
			display: block;
			width:30px;
			height: 3px;
			margin: 6px auto;
			background-color: #fff;
			border-radius: 10px;
			transition: .3s;
		}

		.menu-button:hover .bar:nth-of-type(1) {
			-webkit-transform: translateY(1.5px) rotate(-4.5deg);
			-ms-transform: translateY(1.5px) rotate(-4.5deg);
			transform: translateY(1.5px) rotate(-4.5deg);
		}

		.menu-button:hover .bar:nth-of-type(2) {
			opacity: .9;
		}

		.menu-button:hover .bar:nth-of-type(3) {
			-webkit-transform: translateY(-1.5px) rotate(4.5deg);
			-ms-transform: translateY(-1.5px) rotate(4.5deg);
			transform: translateY(-1.5px) rotate(4.5deg);
		}

		.cross .bar:nth-of-type(1) {
			-webkit-transform: translateY(5px) rotate(-45deg);
			-ms-transform: translateY(5px) rotate(-45deg);
			transform: translateY(5px) rotate(-45deg);
		}

		.cross .bar:nth-of-type(2) {
			opacity: 0;
		}

		.cross .bar:nth-of-type(3) {
			-webkit-transform: translateY(-15px) rotate(45deg);
			-ms-transform: translateY(-15px) rotate(45deg);
			transform: translateY(-15px) rotate(45deg);
		}

		.cross:hover .bar:nth-of-type(1) {
			-webkit-transform: translateY(4.5px) rotate(-40.5deg);
			-ms-transform: translateY(4.5px) rotate(-40.5deg);
			transform: translateY(4.5px) rotate(-40.5deg);
		}

		.cross:hover .bar:nth-of-type(2) {
			opacity: .1;
		}

		.cross:hover .bar:nth-of-type(3) {
			-webkit-transform: translateY(-13.5px) rotate(40.5deg);
			-ms-transform: translateY(-13.5px) rotate(40.5deg);
			transform: translateY(-13.5px) rotate(40.5deg);
		}
	</style>
	<!-- swiper / 滑动侧边栏 start-->
	<!-- 文档地址 https://www.swiper.com.cn/api/ -->
	<div class="swiper-container2" style="height: 100vh;width: 100%;overflow: hidden;">
		<div class="swiper-wrapper">
			<div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;min-width: 100px;width: 60%;max-width: 320px;background-color: #2C8DFB;color: #fff;">
				Menu slide
			</div>
			<div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;width: 100%;background-color: #999">
				<div class="menu-button" style="position: absolute;top: 0px;left: 0px;padding: 6px;cursor: pointer;transition: .3s;background-color: #2C8DFB;">
					<div class="bar"></div>
					<div class="bar"></div>
					<div class="bar"></div>
				</div>
				<p>Content slide</p>

			</div>
		</div>
	<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

	<script type="text/javascript">
		var menuButton = document.querySelector('.menu-button');
		var openMenu = function () {
			swiper.slidePrev();//滑动到前一个滑块。
		};
		var swiper = new Swiper('.swiper-container2', {
			slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。
//可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
			initialSlide: 1,//设定初始化时slide的索引。Swiper默认初始化时显示第一个slide
			resistanceRatio: 0,//抵抗率。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
			slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide
			noSwipingSelector:'p',//设置不可触摸滑动的元素标签
			on: {
				//回调函数，swiper从当前slide开始过渡到另一个slide时执行。
				slideChangeTransitionStart: function () {
					var slider = this;
					if (slider.activeIndex === 0) {
						menuButton.classList.add('cross');
						// required because of slideToClickedSlide
						menuButton.removeEventListener('click', openMenu, true);
					} else {
						menuButton.classList.remove('cross');
					}
				},
				//回调函数，swiper从一个slide过渡到另一个slide结束时执行。
				slideChangeTransitionEnd: function () {
					var slider = this;
					if (slider.activeIndex === 1) {
						menuButton.addEventListener('click', openMenu, true);
					}
				},
			}
		});
  	</script>
	<!-- swiper / 滑动侧边栏 end-->

	
